<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{padding: 0; margin: 0; list-style-type: none;}
    .cont{ width: 100vw; height: 100vh;  background-color: aquamarine;}
    header{ width: 100%; height: 60px; background:#eadafe; display: flex; flex-direction: row; justify-content: center; align-items: center;}
    header input{ width: 50%; height: 30px; border: 1px solid #ccc; outline: none; padding: 0 20px; box-sizing: border-box;}
    header button{ width: 10%; height: 30px; border: 1px solid #ccc; background: rgb(0, 179, 255);}
    #main{ width: 100%; height: calc( 100vh - 40px ); position: relative; background-color: aquamarine; overflow: hidden;}
    .bg0{background-color: #dafef9;}
    .bg1{background-color: #dafee7;}
    .bg2{background-color: #fedae1;}
    .bg3{background-color: #fef6dc;}
    .bg4{background-color: #fedafe;}
    .bg5{background-color: #fedaf3;}
    .bg6{background-color: #daebfe;}
    .bg7{background-color: #dae5fc;}
    .bg8{background-color: #dafefe;}
    .bg9{background-color: #0fa9b7;}
    .bg10{background-color: #430e84;}
    #main .item-box{ width: 400px; height: 400px; position: absolute; border-radius: 5px; box-sizing: border-box; box-shadow: 0 0 4px rgb(0, 179, 255);}
    #main .item-box h1{ background-color: #0fa9b7; color: #333; font-size: 16px; padding: 10px; text-align: left;}
    #main .item-box p{ padding: 10px; font-size: 14px;}
    #main .item-box span{ position: absolute; bottom: 10px; right: 10px; font-size: 12px; color: #333; cursor: pointer;}
    /* //删除特效 */
    .removeactive{ animation: remove 1s; transition: rotateZ 1s; transform-origin: left bottom;}
    @keyframes remove{
        0%{opacity: 1; transform: rotateZ(0deg);}
        100%{opacity: 0; transform: rotateZ(-90deg);}
    }
</style>
<body>
    <div class="cont">
          <header>
              <input type="text" placeholder="许愿墙" id="xuyuanqiang">
              <button id="send">发布</button>
          </header>
          <main id="main">
               <div class="item-box bg0">
                   <h1>内容：</h1>
                   <p>芦柴棒加起大本营南园路的萨芬雷克萨合法的流量卡是回复凯</p>
                   <span>关闭</span>
               </div>
          </main>
    </div>
    <script>
        // 1. 获取元素
        let inputs = document.querySelector('#xuyuanqiang');
        let main = document.querySelector('#main');
        let send = document.querySelector('#send');
        
        // 监听enter事件
        inputs.addEventListener('keyup',function(e){
              if(e.keyCode == 13){
                  send.click();
              }
        })
        // 2. 事件监听 判断非空
        send.addEventListener('click',function(e){
            // 获取输入框的值
            let val = inputs.value;
            // 判断非空
            if(val == ''){
                alert('请输入内容');
                return;
            }


            // 3. 创建元素
            //生成0-10随机数
            var min = 0;
            var max = 10;
            var random = Math.floor(Math.random()*(max-min+1))+min;
            let color = 'bg'+random;
            let content = `<div class="item-box ${color}"><h1>内容：</h1><p>${val}</p><span>关闭</span></div>`;
            main.innerHTML += content;

            //清空input
            inputs.value = '';
            sendAttr();
        })

        function sendAttr(){
            let items = document.querySelectorAll('.item-box');
            let xspan = document.querySelectorAll('.item-box span');
            items.forEach((item,i)=>{
                //生成随机left 和 top
                var min = 0;
                var max = document.documentElement.clientWidth - item.offsetWidth;
                var left1 = Math.random()*max;
                var min1 = 0;
                var max1 = document.documentElement.clientHeight - item.offsetHeight;
                var top1 = Math.random()*max1;
                // 设置样式
                item.style.left = left1 + 'px';
                item.style.top = top1 + 'px';
                  console.log(document.documentElement.clientWidth,document.documentElement.clientHeight,123);
                item.onmousedown = function(e){
                  for(let j = 0; j < items.length; j++){
                    items[j].style.zIndex = '1';
                  }
                  this.style.zIndex = '1000';
                  let pageX = e.clientX - parseInt(e.target.style.left);
                  let pageY = e.clientY - parseInt(e.target.style.top);
                  // 4. 鼠标移动事件
                  document.onmousemove = function(e){
                      let l = e.clientX - pageX;
                      let t = e.clientY - pageY;
                      // 6. 移动元素
                      item.style.left = l + 'px';
                      item.style.top = t + 'px';
                  }
                    // 5. 鼠标松开事件
                    document.onmouseup = function(){
                        document.onmousemove = null;
                        document.onmouseup = null;
                    }
             }
            })

            xspan.forEach(element => {
                element.addEventListener('click',function(ea){
                    this.parentNode.classList.add('removeactive');
                    // this.parentNode.addEventListener('transitionend',function(){
                    //     this.parentNode.remove();
                    // })
                    setTimeout(()=>{
                        // main.removeChild(ea.target.parentNode);
                        this.parentNode.remove();
                    },800)
                })
            });

        }
        sendAttr();
    </script>
</body>
</html>